<template>
  <view class="content">
    <view class="creen" @tap="screenShow = true" style="background-color: #fff;">
      <view class="">
        筛选
      </view>
      <image class="arrow-down" style="width: 16rpx; height: 10rpx;" src="../../static/img/arrow-down.png" mode="">
      </image>
    </view>
    <view class="listsss">
      <view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item.card_id)">
        <view class="dcl" v-if="item.list_state == '待处理' || item.list_state == '已邀约'">
          {{item.list_state}}
        </view>
        <view class="yty" v-else-if="item.list_state == '报名已同意' || item.list_state == '邀约已同意'">
          {{item.list_state}}
        </view>
        <view class="yjj" v-else-if="item.list_state == '报名已拒绝' || item.list_state == '邀约已拒绝'">
          {{item.list_state}}
        </view>
        <view class="ywc" v-else-if="item.list_state == '已完成'">
          {{item.list_state}}
        </view>
        <view class="hBox">
          <view>
            合作的达人
          </view>
          <view style="color: #7D81A9;">
            <image style="width: 28rpx; height: 28rpx;" src="../../static/img/dh.png" mode=""></image>
            {{item.mobile}}
          </view>
        </view>
        <view class="itemContent">
          <view class="title">
            <view class="name">
              {{item.dy_nickname}}
              <template v-if="item.gender ==1">
                <image src="../../static/img/man.png" mode=""></image>
              </template>
              <template v-if="item.gender ==2">
                <image src="../../static/img/women.png" mode=""></image>
              </template>
            </view>


          </view>

          <view class="lableBoxS">
            <view style="background-color: #DDE3F9;">
              {{item.city}}{{item.area}}
            </view>
            <view style="background-color: #FFDFC1;" v-for="(i,index) in item.category_data">
              {{i}}
            </view>

            <view style="background-color: #CAE5BD;">
              {{item.content_type_name}}
            </view>

          </view>
          <view class="numbers">
            <view class="numberBox">
              <view class="lable">
                粉丝
              </view>
              <view class="num">
                {{item.fans_num}}
              </view>
            </view>
            <view class="numberBox" style="text-align: center;">
              <view class="lable">
                内容力等级
              </view>
              <view class="num golden">
                Lv{{item.content_level}}
              </view>
            </view>
            <view class="numberBox" style="text-align: right;">
              <view class="lable">
                带货力等级
              </view>
              <view class="num golden">
                Lv{{item.sales_level}}
              </view>
            </view>
          </view>
          <view class="u-flex-between margin-top-sm" style="display: flex;align-items: center;">
            <view class="btn" style="font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #6E7480;">
              <view class="" v-if="item.store_name != null">
                探店门店：{{item.store_name}}
              </view>
              <view class="" v-if="item.time != null">
                探店时间：{{item.time}}
              </view>
              <view class="">
                带货力等级：Lv{{item.sales_level}}
              </view>
            </view>
            <view class="btnS" v-if="item.list_state == '待处理'">
              <view class="operateBtn">
                <view class="btn" @tap.stop="tongyi(item.order_join_id)">
                  同意
                </view>
                <view class="btn" style="background-color: #EFF0F3;color: #7D81A9;margin-left: 16rpx;"
                  @tap.stop="jujue(item.order_join_id)">
                  拒绝
                </view>
              </view>
            </view>

            <view class="tongyBtn"
              v-if="item.list_state == '报名已同意'|| item.list_state == '邀约已同意' ||item.list_state == '邀约达人已同意'">
              <span v-if="item.list_state == '报名已同意'">报名已同意</span>
              <span v-if="item.list_state == '邀约已同意' ||item.list_state == '邀约达人已同意'">邀约达人已同意</span>
            </view>
            <view class="tongyBtn"
              v-if="item.list_state == '报名已拒绝'|| item.list_state == '邀约已拒绝' ||item.list_state == '邀约达人已拒绝'">
              <span v-if="item.list_state == '报名已拒绝'">报名已拒绝</span>
              <span v-if="item.list_state == '邀约已拒绝' ||item.list_state == '邀约达人已同意'">邀约达人已拒绝</span>
            </view>

					</view>
				</view>
			</view>
		</view>

		<!-- 筛选 -->
		<u-popup :show="screenShow" @open="screenOpen" mode="top" width="100%">
			<view class="screenContent " style="height: 100vh; padding: 30rpx 30rpx;">
				<u-icon name="close" size="24" @click="screenClose"></u-icon>
				<view class="itemBox margin-top-lg">
					<view class="title">
						粉丝量
					</view>
          <view class="itemListBox">
            <view class="item itemBaoChou" :class="{active : item.flag}" v-for="(item,i) in fans" :key="i" @tap="screenBtn(item,1)">
            	{{item.name}}
            </view>
          </view>
				
				</view>
				<view class="itemBox">
					<view class="title">
						带货力等级
					</view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in dh" :key="i" @tap="screenBtn(item,5)">
            	{{item.name}}
            </view>
          </view>
					
				</view>
				<view class="itemBox">
					<view class="title">
						内容力等级
					</view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in nr" :key="i" @tap="screenBtn(item,6)">
            	{{item.name}}
            </view>
          </view>
					
				</view>
				<view class="itemBox">
					<view class="title">
						性别
					</view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in gender" :key="i" @tap="screenBtn(item,2)">
            	{{item.name}}
            </view>
          </view>
					
				</view>
				<view class="itemBox">
					<view class="title">
						邀约状态
					</view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in zt" :key="i" @tap="screenBtn(item,3)">
            	{{item.name}}
            </view>
          </view>
					
				</view>
				<view class="itemBox">
					<view class="title">
						申请人状态
					</view>
          <view class="itemListBox">
            <view class="item" :class="{active : item.flag}" v-for="(item,i) in sq" :key="i" @tap="screenBtn(item,4)">
            	{{item.name}}
            </view>
          </view>
				
				</view>
				<view class="screenBtns">
					<view class="btn" @tap="resetting">
						重置
					</view>
					<view class="btn" style="background: #7D81A9;color: #fff;margin-right: 0;" @tap="confirmFilter">
						确认
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				order_sn: '',
				queryInfo: {
					order_sn: '',
					sales_level: '',
					content_level: '',
					fans_num: '',
					gender: '',
					state: '',
					invite_state: ''
				},
				screenShow: false,
				collectShow: false,
				list: [],
				cardList: [],
				category_data: [],
				remunerate_type_data: [],
				content_data: [],
				chain_type_data: [],
				value: '',
				timeValue: '请选择探店时间',
				shopAddressValue: '请选择门店',
				gradeValue: '请选择',
				// 报名弹框
				applicationShow: false,
				timeShow: false,
				gradeShow: false,
				grade: [
					['Lv1', 'Lv2', 'Lv3', 'Lv4', 'Lv5', 'Lv6', 'Lv7']
				],
				state: [{
						id: '1',
						name: '已完成',
						flag: false
					},
					{
						id: '2',
						name: '已取消',
						flag: false
					}, {
						id: '3',
						name: '进行中',
						flag: false
					}, {
						id: '4',
						name: '已结束',
						flag: false
					},
				],
				gender: [{
						id: 1,
						name: '男',
						flag: false
					},
					{
						id: 2,
						name: '女',
						flag: false
					}
				],
				form: {

				},
				order_sn: '',
				my_card: {},
				receive_card: [],
				card_id: '',
				dy_nickname: '',
				confirm_join_info: {
					order_sn: '',
					card_id: '',
					time: '',
					store_id: '',
					sales_level: '',
					num: '',
					remark: ''
				},
				fans: [{
						id: 1,
						name: '0-1k',
						flag: false
					},
					{
						id: 2,
						name: '1k-1w',
						flag: false
					}, {
						id: 3,
						name: '1w-10W',
						flag: false
					}, {
						id: 4,
						name: '10W-100W',
						flag: false
					}, {
						id: 5,
						name: '100w+',
						flag: false
					}
				],
				dh: [{
						id: '0',
						name: 'Lv0',
						flag: false
					},
					{
						id: 1,
						name: 'Lv1',
						flag: false
					},
					{
						id: 2,
						name: 'Lv2',
						flag: false
					}, {
						id: 3,
						name: 'Lv3',
						flag: false
					}, {
						id: 4,
						name: 'Lv4',
						flag: false
					}, {
						id: 5,
						name: 'Lv5',
						flag: false
					}, {
						id: 6,
						name: 'Lv6',
						flag: false
					}, {
						id: 7,
						name: 'Lv7',
						flag: false
					}
				],
				nr: [{
						id: '0',
						name: 'Lv0',
						flag: false
					},
					{
						id: 1,
						name: 'Lv1',
						flag: false
					},
					{
						id: 2,
						name: 'Lv2',
						flag: false
					}, {
						id: 3,
						name: 'Lv3',
						flag: false
					}, {
						id: 4,
						name: 'Lv4',
						flag: false
					}, {
						id: 5,
						name: 'Lv5',
						flag: false
					}, {
						id: 6,
						name: 'Lv6',
						flag: false
					}, {
						id: 7,
						name: 'Lv7',
						flag: false
					}
				],
				zt: [{
						id: 1,
						name: '已邀约',
						flag: false
					},
					{
						id: 2,
						name: '已同意',
						flag: false
					},
					{
						id: 3,
						name: '已拒绝',
						flag: false
					}
				],
				sq: [{
						id: 1,
						name: '待处理',
						flag: false
					},
					{
						id: 2,
						name: '已同意',
						flag: false
					},
					{
						id: 3,
						name: '已拒绝',
						flag: false
					},
					{
						id: 3,
						name: '已完成',
						flag: false
					}
				]
			};
		},
		computed: {
			labelStyle() {
				return {
					fontSize: '24rpx',
				};
			}
		},
		onShow() {
			const shopAddress = uni.getStorageSync('name');
			this.confirm_join_info.store_id = uni.getStorageSync('store_id');
			if (!shopAddress) {
				this.shopAddressValue = '请选择门店'
			} else {
				this.shopAddressValue = shopAddress
			}
			this.getIndex()
		},
		onLoad(options) {
			this.order_sn = options.order_sn
			uni.setStorageSync('name', '')
			this.get_choose_data()
		},
		created() {
			uni.hideTabBar()
		},
		onReady() {

		},
		methods: {
			async tongyi(id) {
				const obj = {
					order_join_id: id
				}
				const {
					data: res
				} = await uni.$http.post('order/agreement_user', obj)
				if (res.code != 1) {
					this.toast.msg(res.msg)
					return
				} else {
					this.toast.msg(res.msg)
					this.getIndex()
				}
			},
			async jujue(id) {
				const obj = {
					order_join_id: id
				}
				const {
					data: res
				} = await uni.$http.post('order/refuse_user', obj)
				if (res.code != 1) {
					this.toast.msg(res.msg)
					return
				} else {
					this.toast.msg(res.msg)
					this.getIndex()
				}
			},
			async goDetaila(item) {
				const obj = {
					id: item.id,
					order_sn: item.order_sn
				}
				const {
					data: res
				} = await uni.$http.post('join_order/get_card_list', obj)
				if (res.code == 1) {
					uni.showToast({
						title: '已同意',
						icon: 'success'
					});
				}
			},
			async goDetaila1(item) {
				const obj = {
					order_join_id: item.order_join_id
				}
				const {
					data: res
				} = await uni.$http.post('order/refuse_invite', obj)
				if (res.code == 1) {
					uni.showToast({
						title: '已拒绝',
						icon: 'success'
					});
				}
			},

			cardBtn(id, dy_nickname) {
				this.collectShow = false
				this.card_id = id
				this.confirm_join_info.card_id = id
				this.dy_nickname = dy_nickname
				this.applicationShow = true
			},
			async baom(sn) {
				this.collectShow = true
				this.order_sn = sn
				this.confirm_join_info.order_sn = sn
				const obj = {
					order_sn: sn
				}
				this.collectShow = true
				const {
					data: res
				} = await uni.$http.post('join_order/get_card_list', {
					order_sn: this.order_sn
				})
				if (res.code != 1) {
					this.toast.msg(res.msg)
					return
				}
				this.my_card = res.data.my_card
				this.receive_card = res.data.receive_card
			},
			showCityTwo() {
				this.$refs.mpvueCityPickerTwo.show()
			},
			onConfirmTwo(e) {
				const arr = e.label.split("-")
				this.city = arr[1]
				this.queryInfo.city = arr[1]
				this.getIndex()
			},
			confirmFilter() {
				this.fans.forEach((item) => {
					if (item.flag == true) {
						this.queryInfo.fans_num = item.id
					}
				})

				this.dh.forEach((item) => {
					if (item.flag == true) {
						this.queryInfo.sales_level = this.queryInfo.sales_level + item.id + ','
					}
				})
				this.queryInfo.sales_level = this.queryInfo.sales_level.substring(0, this.queryInfo.sales_level
					.lastIndexOf(
						','));
				this.nr.forEach((item) => {
					if (item.flag == true) {
						this.queryInfo.content_level = this.queryInfo.content_level + item.id + ','
					}
				})
				this.queryInfo.content_level = this.queryInfo.content_level.substring(0, this.queryInfo.content_level
					.lastIndexOf(','));
				this.gender.forEach((item) => {
					if (item.flag == true) {
						this.queryInfo.gender = item.id
					}
				})
				this.zt.forEach((item) => {
					if (item.flag == true) {
						this.queryInfo.invite_state = item.id
					}
				})
				this.sq.forEach((item) => {
					if (item.flag == true) {
						this.queryInfo.state = item.id
					}
				})
				this.screenShow = false
				this.getIndex()
			},
			// 重置
			resetting() {
				this.fans.forEach((item) => {
					item.flag = false
				})
				this.dh.forEach((item) => {
					item.flag = false
				})
				this.nr.forEach((item) => {
					item.flag = false
				})
				this.zt.forEach((item) => {
					item.flag = false
				})
				this.sq.forEach((item) => {
					item.flag = false
				})
				this.gender.forEach((item) => {
					item.flag = false
				})
				this.queryInfo = {
					order_sn: this.order_sn,
					sales_level: '',
					content_level: '',
					fans_num: '',
					gender: '',
					state: '',
					invite_state: ''
				}
			},
			// 筛选框关闭
			screenClose() {
				this.screenShow = false
				this.resetting()
			},
			screenOpen() {
				this.resetting()
			},
			screenBtn(i, n) {
				if (n == 1) {
					console.log(i.flag);
					this.fans.forEach((item) => {
						if (i.id == item.id) {
							i.flag = !i.flag
						} else {
							item.flag = false
						}
					})
					console.log(i.flag);
				}
				if (n == 2) {
					this.gender.forEach((item) => {
						if (i.id == item.id) {
							i.flag = !i.flag
						} else {
							item.flag = false
						}
					})
				}
				if (n == 3) {
					this.zt.forEach((item) => {
						if (i.id == item.id) {
							i.flag = !i.flag
						} else {
							item.flag = false
						}
					})
				}
				if (n == 4) {
					this.sq.forEach((item) => {
						if (i.id == item.id) {
							i.flag = !i.flag
						} else {
							item.flag = false
						}
					})
				}
				if (n == 5 || n == 6) {
					i.flag = !i.flag
				}
			},
			// 获取筛选
			async get_choose_data() {
				const {
					data: res
				} = await uni.$http.post('index/get_choose_data', {
					type: 1
				})
				if (res.code != 1) {
					this.toast.msg(res.msg)
					return
				}
				res.data.category_data.forEach((item) => {
					item.flag = false
				})
				res.data.remunerate_type_data.forEach((item) => {
					item.flag = false
				})
				res.data.content_data.forEach((item) => {
					item.flag = false
				})
				res.data.chain_type_data.forEach((item) => {
					item.flag = false
				})
				this.category_data = res.data.category_data
				this.remunerate_type_data = res.data.remunerate_type_data
				this.content_data = res.data.content_data
				this.chain_type_data = res.data.chain_type_data
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			// 跳转创建页面
			goAdd() {
				uni.navigateTo({
					url: '/pages/add/add'
				})
			},
			close() {
				this.applicationShow = false
				// console.log('close');
			},
			// 打开时间选择
			addTime() {
				this.applicationShow = false
				this.timeShow = true
			},
			// 关闭时间选择
			timeCancel() {
				this.applicationShow = true
				this.timeShow = false
			},
			// 确认时间
			async confirmTime(e) {
				this.timeShow = false
				this.applicationShow = true
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				this.timeValue = timeValue
				this.confirm_join_info.time = timeValue
			},
			// 打开带货力等级
			addGrade() {
				this.applicationShow = false
				this.gradeShow = true
			},
			// 关闭带货力等级
			gradeCancel() {
				this.applicationShow = true
				this.gradeShow = false
			},
			// 确认带货力等级
			async confirmGrade(e) {
				this.gradeShow = false
				this.applicationShow = true
				this.gradeValue = e.value[0]
				if (this.gradeValue == 'Lv1') {
					this.confirm_join_info.sales_level = 1
				}
				if (this.gradeValue == 'Lv2') {
					this.confirm_join_info.sales_level = 2
				}
				if (this.gradeValue == 'Lv3') {
					this.confirm_join_info.sales_level = 3
				}
				if (this.gradeValue == 'Lv4') {
					this.confirm_join_info.sales_level = 4
				}
				if (this.gradeValue == 'Lv5') {
					this.confirm_join_info.sales_level = 5
				}
				if (this.gradeValue == 'Lv6') {
					this.confirm_join_info.sales_level = 6
				}
				if (this.gradeValue == 'Lv7') {
					this.confirm_join_info.sales_level = 7
				}
			},
			// 跳转详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/people/drxxxq?id=' + id
				})
			},
			// 获取首页数据
			async getIndex() {
				this.queryInfo.order_sn = this.order_sn
				const {
					data: res
				} = await uni.$http.post('order/order_anchor_list', this.queryInfo)
				if (res.code != 1) {
					this.toast.msg(res.msg)
					return
				}
				this.list = res.data
			}
		}
	}

</script>

<style lang="scss">
  .hBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.8);
    margin-top: 24rpx;
  }

  .dcl {
    width: 76rpx;
    height: 40rpx;
    background-color: #FAC798;
    font-size: 20rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 16rpx 0 16rpx 0;
    color: #fff;
  }

  .yty {
    width: 120rpx;
    height: 40rpx;
    background-color: #94D4A6;
    font-size: 20rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 16rpx 0 16rpx 0;
    color: #fff;
  }

  .yjj {
    width: 120rpx;
    height: 40rpx;
    background-color: #D0D1DB;
    font-size: 20rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 16rpx 0 16rpx 0;
    color: #fff;
  }

  .ywc {
    width: 76rpx;
    height: 40rpx;
    background-color: #D0D1DB;
    font-size: 20rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 16rpx 0 16rpx 0;
    color: #fff;
  }

  .tongyBtn {
    height: 52rpx;
    background: #7D81A9;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    text-align: center;
    line-height: 52rpx;
    padding: 0 24rpx;
    color: #fff;
    font-size: 24rpx;
  }

  .content {
    min-height: 100vh;
    background-color: #F2F3F6;

    .tabbar {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
    }

    .headerBox {
      box-sizing: border-box;
      padding-top: 108rpx;
      width: 100%;
      height: 278rpx;
      background: linear-gradient(200deg, #C6CBE1 0%, #FFFFFF 100%);
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;

      .title {
        text-align: center;
        font-size: 34rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
      }

      .screenBox {
        position: relative;
        box-sizing: border-box;
        padding: 0 28rpx 0 56rpx;
        margin-top: 40rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;

        .arrow-down {
          margin-left: 8rpx;
          width: 16rpx;
          height: 16rpx;
        }

        .city {
          margin-right: 56rpx;
        }

        .ipt {
          position: absolute;
          right: 28rpx;
          top: 0;
          box-sizing: border-box;
          width: 338rpx;
          height: 60rpx;
          line-height: 60rpx;
          background: #F2F3F6;
          border-radius: 124rpx 124rpx 124rpx 124rpx;
          padding: 0 24rpx 0 32rpx;


          input {
            height: 60rpx;
            line-height: 60rpx;
            padding-right: 80rpx;
            box-sizing: border-box;
          }

          image {
            position: absolute;
            top: 10rpx;
            right: 24rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }

    .listsss {
      .item {
        width: 686rpx;
        // height: 294rpx;
        padding-bottom: 26rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .stateImg {
          width: 92rpx;
          height: 36rpx;
        }


        .itemContent {
          padding: 18rpx 22rpx 0 24rpx;

          .title {
            display: flex;
            align-items: center;

            .name {
              flex: 1;
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              image {
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
              }
            }

            .btns {

              display: flex;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                margin-right: 16rpx;
              }

              .frame {
                width: 52rpx;
                height: 52rpx;

                image {
                  width: 52rpx;
                  height: 52rpx;
                }
              }
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 20rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              margin-right: 8rpx;
            }
          }

          .numbers {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1rpx solid #F2F3F6;
            padding-bottom: 18rpx;

            .numberBox {
              width: 33%;
              display: flex;
              align-items: center;
              text-align: center;
            }

            .lable {
              font-size: 24rpx;
              color: #6E7480;
            }

            .num {
              font-size: 32rpx;
              color: #000000;
            }

            .golden {
              font-size: 32rpx;
              color: #EAA04A;
            }
          }

          .bottomBox {
            display: flex;
            align-items: center;
            height: 52rpx;
            margin-top: 14rpx;

            .avatar {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userId {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: #6E7480;
              margin: 0 8rpx;

              .copyImg {
                width: 28rpx;
                height: 28rpx;
                margin-left: 8rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }
    }

    .addBtnImg {
      position: fixed;
      bottom: 210rpx;
      right: 44rpx;
      width: 132rpx;
      height: 132rpx;
      z-index: 99;
    }


    .applicationContent {
      padding-left: 40rpx;

      .title {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .u-form-item {
        height: 108rpx;
        // margin-right: 20rpx;
        padding-right: 20rpx;

        span {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.4);
        }

        image {
          display: inline-block;
          vertical-align: middle;
          width: 42rpx;
          height: 42rpx;
        }
      }

      .applicationBtns {
        height: 162rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;

        view {
          width: 320rpx;
          height: 80rpx;
          line-height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
        }

        .qxBtn {
          box-sizing: border-box;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          color: #7D81A9;
          margin-right: 22rpx;
        }

        .qrBtn {
          background: #7D81A9;
          color: #fff;
        }
      }
    }

    .screenContent {
      min-height: 100vh;
      padding: 30rpx;
      padding-right: 0;
      box-sizing: border-box;
      overflow: scroll;

      .itemBox {
        margin-bottom: 10rpx;

        .title {
          font-size: 32rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          margin-bottom: 32rpx;
        }

        .itemListBox{
          .item {
            display: inline-block;
            width: 156rpx;
            height: 64rpx;
            background: #F2F3F6;
            border-radius: 200rpx;
            margin-right: 22rpx;
            margin-bottom: 32rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            text-align: center;
            line-height: 64rpx;
          }
          
          .item:nth-child(4n) {
            margin-right: 0rpx;
            // margin-left: 22rpx;
          }
          .itemBaoChou:nth-child(4) {
            font-size: 24rpx;
          }  
          .active {
            background-color: #7D81A9;
            color: #FFFFFF;
          }
        }
      }

      .screenBtns {
        width: 662rpx;
        margin: 0 auto;
        margin-top: 40rpx;
        display: flex;

        .btn {
          width: 320rpx;
          height: 80rpx;
          border-radius: 40rpx;
          text-align: center;
          line-height: 80rpx;
          font-size: 28rpx;
          color: #7D81A9;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          box-sizing: border-box;
          margin-right: 22rpx;
        }
      }
    }

    .cardlist {
      max-height: 1172rpx;
      background-color: #F2F3F6;
      margin-top: 120rpx;

      .item {
        width: 686rpx;
        height: 324rpx;
        padding-bottom: 26rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin: 24rpx auto;

        .itemContent {
          padding: 18rpx 22rpx 0 24rpx;

          .belong {
            font-size: 28rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.8);
          }

          .title {
            display: flex;
            align-items: center;
            margin-top: 24rpx;

            .name {
              flex: 1;
              width: 380rpx;
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 550;
              color: #000000;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              image {
                display: inline-block;
                width: 24rpx;
                height: 24rpx;
                margin-left: 8rpx;
              }
            }

            .btns {

              display: flex;
              font-size: 24rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: #FFFFFF;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                margin-right: 16rpx;
              }

              .frame {
                width: 52rpx;
                height: 52rpx;

                image {
                  width: 52rpx;
                  height: 52rpx;
                }
              }
            }
          }

          .lableBoxS {
            display: flex;
            color: rgba(0, 0, 0, 0.6);
            font-size: 20rpx;
            margin-top: 20rpx;
            margin-bottom: 18rpx;

            view {
              height: 32rpx;
              line-height: 32rpx;
              padding: 0 12rpx;
              margin-right: 8rpx;
            }
          }

          .numbers {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .numberBox {
              width: 33%;
              display: flex;
              align-items: center;
              text-align: center;
            }

            .lable {
              font-size: 24rpx;
              color: #6E7480;
            }

            .num {
              font-size: 32rpx;
              color: #000000;
            }

            .golden {
              font-size: 32rpx;
              color: #EAA04A;
            }
          }

          .userBox {
            display: flex;
            align-items: center;
            height: 52rpx;
            margin-top: 14rpx;

            .avatar {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .userId {
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              color: #6E7480;
              margin: 0 8rpx;

              .copyImg {
                width: 28rpx;
                height: 28rpx;
                margin-left: 8rpx;
              }
            }

            .btnS {
              display: flex;

              .btn {
                width: 128rpx;
                height: 52rpx;
                line-height: 52rpx;
                text-align: center;
                background: #7D81A9;
                border-radius: 40rpx;
                font-size: 24rpx;
                font-family: PingFang SC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                margin-right: 16rpx;
              }

              .shareImg {
                width: 52rpx;
                height: 52rpx;
              }
            }
          }
        }
      }
    }

    .operateBtn {
      margin-top: 26rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;

      .btn {
        width: 128rpx;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;
        background: #7D81A9;
        border-radius: 40rpx;
        color: #FFFFFF;
      }
    }

    .creen {
      height: 98rpx;
      line-height: 98rpx;
      display: flex;
      align-items: center;
      padding: 0 52rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;

      image {
        margin-left: 8rpx;
      }
    }
  }
</style>